<template>
  <div class="resource-item clearfix">
    <span>
      <a>{{value.title}}</a>
    </span>
    <span class="info">
      <span>练习类型：{{value.exam_type}}</span>
      <span>上传者：{{value.owner__real_name}}</span>
      <span>{{value.price}}{{value.yd_type === 0 ? '普通' : value.yd_type === 1 ? '钻石' : '' }}语点</span>
    </span>
    <input class="url" type="text" :id="'download_url_' + value.id" :value="appOrigin + '#/resource/download/' + value.id"/>
    <span class="option">
      <button class="blue-btn-outline" @click="goPractise">试一试</button>
    </span>
  </div>
</template>

<script>
import { collect } from 'api/resource'
import { checkPaperBuy } from 'api/common'
export default {
  name: 'resourceItem',
  data() {
    return {
      appOrigin: process.env.APP_ORIGIN,
      collected: false,
      collectedStatus: 'xyd-collection_a'
    };
  },
  props: {
    value: {
      type: Object,
      default() {
        return {/*  */}
      }
    },
    isListen: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    titleIcon(ext) {
      const types = {
        word: ['doc', 'docx', 'word'],
        ppt: ['ppt'],
        pdf: ['pdf'],
        excel: ['xlsx'],
        video: ['mp4', 'MP4', 'mkv'],
        music: ['mp3'],
        zip: ['zip', 'rar']
      }
      for (const key in types) {
        if (types[key].filter(v => v === ext).length > 0) {
          return key
        }
      }
      return ''
    },
    // 试一试
    goPractise() {
      checkPaperBuy({
        pid: this.value.id
      })
      .then(res => {
        if (res.data) {
          this.$router.push('/practise-detail?id=' + this.value.id)
        } else {
          this.$message({
            message: '您还未购买',
            type: 'error'
          })
        }
      })
      .catch(err => {
        this.$message({
          message: '您还未购买',
          type: 'error'
        })
      })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .resource-item{
    padding: 30px 0;
    border-bottom: 1px solid #e5e6e7;
    .title{
      display: inline-block;
      line-height: 25px;
      padding-left: 25px;
      background-image: url('../../assets/common_images/doc.png');
      background-repeat: no-repeat;
      background-size: 24px;
      vertical-align: middle;
      width: 200px;
      word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//省略号
      white-space: nowrap;//不换行
      >a:hover{
        text-decoration: underline;
        color: #00A2EA;
      }
    }
    .word{
      background-image: url('../../assets/common_images/doc.png');
    }
    .ppt{
      background-image: url('../../assets/common_images/ppt.png');
    }
    .pdf{
      background-image: url('../../assets/common_images/pdf.png');
    }
    // .excel{
    //   background-image: url('../../assets/common_images/excel.png');
    // }
    .zip{
      background-image: url('../../assets/common_images/rar.png');
    }
    .music{
      background-image: url('../../assets/common_images/mp3.png');
    }
    .video{
      background-image: url('../../assets/common_images/video.png');
    }
    .info{
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #999;
      margin-left: 30px;
      width: 450px;
      word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
      overflow: hidden;//溢出隐藏
      text-overflow: ellipsis;//省略号
      white-space: nowrap;//不换行
      >span{
        margin-right: 10px;
      }
    }
    .option{
      float: right;
      .blue-btn-outline{
        width: 100px;
      }
      >a{
        padding: 0 10px;
      }
    }
    .url{
      opacity: 0;
      position: absolute;
      z-index: -1;
    }
  }
</style>